<!-- 公共组件：进度条 -->
<template>
    <div class="progressComponent">
        <!--     <el-date-picker
          v-model="dateValue"
          :type="dateType"
          :inputVal="inputVal"
          placeholder="选择日期"
          @change="change"
        ></el-date-picker>-->
        <el-progress :percentage="percentage"></el-progress>
        <!--   <el-progress :percentage="100" status="warning"></el-progress>
     <el-progress :percentage="100" status="warning"></el-progress>
        <el-progress :percentage="50" status="exception"></el-progress>-->
    </div>
</template>
<style scoped>
    .progressComponent {
        position: relative;
    }
</style>
<script>
    export default {
        name: "progressicon",
        data() {
            return {
                dateValue: ""
            };
        },
        props: {
            percentage: {},

            //进度颜色
            customColors: [
                {color: "#f56c6c", percentage: 20},
                {color: "#e6a23c", percentage: 40},
                {color: "#5cb87a", percentage: 60},
                {color: "#1989fa", percentage: 80},
                {color: "#6f7ad3", percentage: 100}
            ]
            /* dateType: {
              type: String,
              default: "date"
            },
            inputVal: {
              type: String,
              default: ""
            } */
        },
        created() {
            this.dateValue = this.inputVal;
        },
        methods: {
            change() {
                this.$emit("changeVal", this.formatDate(this.dateValue));
            },
            formatDate(dateValue) {
                var date = new Date(dateValue);
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                m = m < 10 ? "0" + m : m;
                var d = date.getDate();
                d = d < 10 ? "0" + d : d;
                return y + "-" + m + "-" + d;
            }
        }
    };
</script>

